<template>
    <div class="container">
        <h2>学号：{{ student.id }}</h2>
        <h2>姓名：{{ student.username }}</h2>
        <h2>年龄：{{ student.age }}</h2>
    </div>
</template>

<script>
export default {
  name: 'DetailView',
  data () {
    return {
      StuId: 0,
      StuData: [
        {
          id: '1',
          username: 'yangzhu',
          age: 48
        },
        {
          id: '2',
          username: 'zhangsan',
          age: 25
        },
        {
          id: '3',
          username: 'lisi',
          age: 20
        }
      ],
      student: {}
    }
  },
  created () {
    // 获取路由信息
    const { params: { id } } = this.$route
    this.StuId = id
    this.findList()
  },
  methods: {
    findList () {
      this.student = this.StuData.find(item => {
        return item.id === this.StuId
      })
    }
  },
  watch: {
    $route (newVal, oldVal) {
      const { params: { id } } = newVal
      this.StuId = id
      this.findList()
    }
  }

}

</script>

<style lang="less">
    .container{
        h2{
            padding: 15px 0;
            text-align: center;
        }
    }
</style>
